<template>
  <div class="execute-container" v-loading="loading" v-if="types != ''">
    <div class="main-content">
      <!-- 左侧边栏 -->
      <aside class="sidebar">
        <div class="sidebar-tabs">
          <span v-if="types != ''" v-for="item,index in menuList" :key="index"
            class="tab-btn"
            :class="{ active: types === item.perms }"
            @click="selectFun(item)"
            >{{item.menuName}}</span
          >
        </div>
        <div style="padding: 10px; height: 100%; width: 100%">
          <div class="search-bar">
            <el-input
              type="text"
              class="search-input"
              v-model="patientName"
              @change="getExecListData('')"
              placeholder="搜索姓名/电话/身份证号/诊号"
            />
            <!-- <input
            type="text"
            v-model="patientName"
            @change="getExecListData"
            placeholder="搜索姓名/电话/身份证号/诊号"
          />
          <el-select
            v-model="selectedDate"
            placeholder="选择日期"
            class="date-select"
            @change="handleSearch" style="margin-left: 20px;"
            :suffix-icon="CaretBottom"
          >
            <el-option label="今天" value="today" />
            <el-option label="昨天" value="yesterday" />
            <el-option label="明天" value="tomorrow" />
          </el-select> -->
            <div
              @click="CustomDatePickerShow = !CustomDatePickerShow"
              class="register-date-box"
            >
              {{ formattedVisitDate }}
              <el-icon size="14"><CaretBottom /></el-icon>
            </div>
            <div
              class="register-date-custom-picker"
              v-if="CustomDatePickerShow"
            >
              <DatePickerTime
                @change="CustomDatePickerChange"
                @update:modelValue="CustomDatePickerChange"
                :time="selectedDate"
              ></DatePickerTime>
            </div>
          </div>

          <div class="patient-list" >
            <div class="patient-items" style="margin-top: 10px;" v-if="dispenseList.length > 0" :style="dispenseList.length > 9?'padding-right: 5px;':''">
              <div
                class="patient-item"
                v-for="item in dispenseList"
                :key="item.orderId"
                :class="{ active: item.orderId === activeOrderId }"
                @click="onSelectOrder(item)"
              >
                <div class="patient-info">
                  <img
                    src="@/assets/pharmacy/man.png"
                    class="patient-icon"
                    v-if="item.patientGender === '1'"
                  />

                  <img src="@/assets/pharmacy/woman.png"  class="patient-icon" v-if="item.patientGender === '2'" alt="" />
                  <img  src="@/assets/pharmacy/icon_weizhi_nor.png"  class="patient-icon" v-if="item.patientGender === '3'" />

                  <span class="patient-name"
                    >{{ item.patientName }}
                    <span style="color: #16ada4">{{
                      execTypeText(item.execType)
                    }}</span>
                  </span>
                  <span
                    class="tag"
                    :class="item.execStatus == '1' ? 'tag-icon' : ''"
                  >
                    {{ execStatusText(item.execStatus) }}</span
                  >
                </div>

                <div class="patient-ids">
                  <div class="patient-id">{{ item?.visitNo }}</div>
                  <div class="patient-time" v-if="item.diagnosisTime">
                    {{ formatDiagnosisTime(item.diagnosisTime) }}
                  </div>
                </div>
              </div>
            </div>
            <div class="patient-items" style="padding: 0px;margin-top:0;height: calc(100vh - 225px);;display: flex;justify-content: center; align-items: center;" v-else  >
                <el-empty :image-size="100"   :image="emptyImage" description="暂无数据" />
            </div>
          </div>
        </div>
      </aside>

      <!-- 右侧主体内容 -->
      <main class="content-area" v-if="dispenseDetail?.orderId" :key="dispenseDetail.orderId">
        <!-- 患者信息栏 -->
        <div class="patient-header">
          <div class="patient-basic">
            <div class="name">
              <img
                src="@/assets/pharmacy/man.png"
                class="patient-icon"
                v-if="dispenseDetail?.patientGender === '1'"
              />

              <img src="@/assets/pharmacy/woman.png"  class="patient-icon" v-if="dispenseDetail?.patientGender === '2'" alt="" />
              <img  src="@/assets/pharmacy/icon_weizhi_nor.png"  class="patient-icon" v-if="dispenseDetail?.patientGender === '3'" />

              <span class="name-text">{{ dispenseDetail?.patientName }}</span>
            </div>
            <span class="gender">{{
              dispenseDetail?.patientGender === '1' ? '男' : '女'
            }}</span>
            <span class="id-number">{{ dispenseDetail?.patientPhone }}</span>
            <span class="age">
              <span class="age-number">{{ dispenseDetail?.ageYear }} 岁</span>
              <span class="age-month">{{ dispenseDetail?.ageMonth }} 月</span>
            </span>
            <span class="weight">{{ dispenseDetail?.weight ||'-' }} kg</span>
            <span class="visit-id"
              >{{ dispenseDetail?.systolicBp||'-'  }}/{{
                dispenseDetail?.diastolicBp||'-' 
              }}
              mmHg</span
            >
          </div>
        </div>

        <!-- 诊断信息 -->
        <section class="diagnosis-section">
          <h3>诊断</h3>
          <div class="diagnosis-info">
            <div class="item">
              <div class="info-row">
                <span class="label">执行项目</span>
                <span class="value">{{
                  execTypeText(dispenseDetail?.execType)
                }}</span>
              </div>
              <div class="info-row">
                <span class="label">诊断时间</span>
                <span class="value">
           
                
                   {{ dispenseDetail?.diagnosisTime }}
              </span>
              </div>
            </div>

            <div class="item">
              <div class="info-row">
                <span class="label">诊断科室</span>
                <span class="value">{{ dispenseDetail?.deptName }}</span>
              </div>
              <div class="info-row">
                <span class="label">诊断医生</span>
                <span class="value">{{ dispenseDetail?.doctorName }}</span>
              </div>
            </div>
          </div>
        </section>
        <section
          class="prescription-section"
          v-if="dispenseDetail?.rxInfo.rxType == '2'"
        >
          <transfusion
            :info="dispenseDetail?.rxInfo"
            :execStatus="dispenseDetail?.execStatus"
            :orderId="orderId"
            @closeDrawer="getExecListData({ orderId: activeOrderId })"
          />
        </section>
        <section
          class="prescription-section"
          v-if="
            dispenseDetail?.rxInfo.rxType == '4' ||
            dispenseDetail?.rxInfo.rxType == '3'
          "
        >
          <acupuncture
            @closeDrawer="getExecListData({ orderId: activeOrderId })"
            :execStatus="dispenseDetail?.execStatus"
            :orderId="orderId"
            :info="dispenseDetail?.rxInfo"
          />
        </section>
        <!-- <InspectorInfoBox></InspectorInfoBox> -->
      </main>
      <div v-else style="margin: 0 auto;display: flex;justify-content: center;align-items: center;">
            <el-empty :image-size="260" :image="emptyImage" description="暂无数据" />
      </div>
      <!-- 右侧信息栏 -->
      <div  style="padding: 20px 0"  >
        <!-- <div @click="getExecListData({ orderId: activeOrderId })">123123123</div> -->
        <member-card :orderId="activeOrderId" :types="types" :historyList="historyList" />
      </div>
    </div>
  </div>
  <div v-else style="padding-top: 200px;">
      <el-empty :image-size="260" :image="emptyImage" description="暂无权限" />

  </div>
</template>

<script setup lang="ts">
import { getExecList, getExecDetail, getRecordList } from '@/api/exec';
import transfusion from './common/transfusion.vue';
import acupuncture from './common/acupuncture.vue';
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import type {
  ExecForm,
  ExecTable,
  ExecTableInfo,
  getExecDetailResponse,
  ChargeListResponse,
  ChargeListResponseData,
  getExecDetailResponseData,
} from '@/types/exec';
import dayjs from 'dayjs';
import { useBaseDataStore } from '@/store/basedata';
import type { getRecordListResponseData } from '@/types/exec';
import MemberCard from './common/memberCard.vue';
import InspectorInfoBox from './common/InspectorInfoBox.vue';
import { CaretBottom } from '@element-plus/icons-vue';
const userEnums = useBaseDataStore();
const dispenseList = ref<ExecTableInfo[]>([]);
const activeOrderId = ref<number>(-1);
const loading = ref<boolean>(false);
const dispenseDetail = ref<getExecDetailResponseData>();
const historyList = ref<getRecordListResponseData[]>([]);
const activeCardId = ref<number>(-1);
const orderId = ref<number | null>(null); // 当前选中的患者ID
const patientDetail = ref<any | undefined>(undefined); // 当前选中的患者详情
// tab切换
const activeTab = ref<'execute' | 'send'>('execute');
const patientName = ref('');
const CustomDatePickerShow = ref<boolean>(false);
//执行类型
const visitDate = ref<any>('');
visitDate.value = dayjs().format('YYYY-MM-DD');

//菜单
import stores from '@/store';
const route = useRoute();
let menuList = ref<any>(
  await stores.useBaseDataStore().findMenuList(route.query.menuId)
);

menuList.value = menuList.value.filter((item:any) => {
  return item.menuType == 2;
})

const getExecListData = async (row?: any) => {
  activeOrderId.value = 0;
  dispenseDetail.value = undefined;
  historyList.value = [];
  loading.value = true;
  const res = await getExecList({
    patientName: patientName.value,
    visitDate: visitDate.value,
    pageNo: 1,
    pageSize: 10000,
    execCategory: types.value == 'execute-ext' ? '2':'1',
  });

  if (res.code == '200') {
    dispenseList.value = res.data || [];

    if (dispenseList.value.length > 0) {
      if (row) {
        onSelectOrder(row);
      } else {
        onSelectOrder(dispenseList.value[0]!);
      }
    }else{
    loading.value = false;

    }
  } else {
    loading.value = false;

  }
};
const handleSearch = () => {
  getExecListData();
};
const types = ref<any>();
if(menuList.value.length > 0){
  types.value = menuList.value[0].perms;
  getExecListData();

}else{
  types.value = '';
}
const selectFun = (row:any) =>{
  types.value = row.perms;
  getExecListData();

}

//console.log(menuList.value,'menuList.value');

const execTypeFun = (execType: string) => {};
//execTypeText
const execTypeText = (execType: any) => {
  return userEnums.getDictsSelect('EXEC_TYPE')
    ?.find(
      (target: any) => target.itemCode?.toString() === execType?.toString()
    )?.itemName;
};

//执行状态
const execStatusText = (execStatus: string) => {
  return userEnums
    .getEnumSelect('execStatusEnum')
    ?.find((target: any) => target.value?.toString() === execStatus?.toString())
    ?.text;
};

//选择时间
const selectedDate = ref('today');
const today = computed(() => {
  const date = new Date();
  return date.toISOString().split('T')[0]; // YYYY-MM-DD格式
});
// 日期显示：若为今天显示“今天”，否则显示 MM-DD
const formattedVisitDate = computed(() => {
  const val = visitDate.value;
  if (!val) return '';
  const current = dayjs();
  const target = dayjs(val);
  if (!target.isValid()) return '';
  return target.isSame(current, 'day') ? '今天' : target.format('MM-DD');
});
const tomorrow = computed(() => {
  const date = new Date();
  date.setDate(date.getDate() + 1);
  return date.toISOString().split('T')[0];
});

const yesterday = computed(() => {
  const date = new Date();
  date.setDate(date.getDate() - 1);
  return date.toISOString().split('T')[0];
});


const tableData: any = [];


const getExecDetailData = async (orderId: number) => {
  try {
    loading.value = true;
    const res = await getExecDetail(orderId);
    if (res.code == '200') {
      dispenseDetail.value = res.data;
    } else {
     
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  } finally {
    loading.value = false;
  }
};

const getRecordListApiBool = ref<boolean>(true);
const getRecordListApi = async (orderId: number) => {
  getRecordListApiBool.value = false;
  const res = await getRecordList({
    orderId,
    pageNo: 1,
    pageSize: 10000,
  });

  if (res.code == '200') {
    historyList.value = res.data || [];
  } else {

  }
  getRecordListApiBool.value = true;
};

const onSelectOrder = (item: any) => {

  activeOrderId.value = 0;
  setTimeout(() => {
    activeOrderId.value = item.orderId;
    orderId.value = item.orderId;
    getExecDetailData(item.orderId);
    getRecordListApi(item.orderId);

  }, 200);
};

const onExpandCard = (orderId: number) => {
  if (activeCardId.value === orderId) {
    activeCardId.value = -1;
  } else {
    activeCardId.value = orderId;
  }
};
const CustomDatePickerChange = (date: any) => {
  // 为空直接关闭
  if (!date) {
    CustomDatePickerShow.value = false;
    return;
  }

  // 规范化为 YYYY-MM-DD 字符串
  const next = dayjs(date).isValid()
    ? dayjs(date).format('YYYY-MM-DD')
    : String(date);
  selectedDate.value = next;
  visitDate.value = next;
  // patientId.value = null;
  CustomDatePickerShow.value = false;
  handleSearch();
};
onMounted(() => {
   
});

// 诊断时间格式化：
// - 无值/非法 => 空字符串（不展示）
// - 当天 => HH:mm
// - 其他日期 => MM-DD HH:mm
const formatDiagnosisTime = (time: any) => {
  if (!time) return '';
  const d = dayjs(time);
  if (!d.isValid()) return '';
  return d.isSame(dayjs(), 'day') ? d.format('HH:mm') : d.format('HH:mm');
};
</script>

<style lang="scss" scoped>
.register-date-custom-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2000;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px 8px 4px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.register-date-box {
  cursor: pointer;
  text-align: right;
  margin-left: 10px;
}
.tag-icon {
  position: relative;
  color: #000 !important;
}
.tag-icon::before {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  left: -10px;
  top: 6px;
  background: #e37318;
  border-radius: 50%;
}
.execute-container {
  width: 100%;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  padding-right: 14px;
  :deep(.el-select__wrapper) {
    padding: 0;
    border: none;
    box-shadow: none;
  }
  :deep(.is-hovering) {
    box-shadow: none;
  }
  // 主内容区
  .main-content {
    flex: 1;
    display: flex;
    overflow: hidden;

    // 左侧边栏
    .sidebar {
      width: 280px;
      height: 100%;
      background: white;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

      .sidebar-tabs {
        flex-shrink: 0;
        display: flex;
        gap: 24px;
        height: 52px;
        padding-left: 22px;
        border: 1px solid #e7e7e7;

        .tab-btn {
          cursor: pointer;
          font-weight: 400;
          font-size: 18px;

          color: rgba(0, 0, 0, 0.4);
          line-height: 52px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          position: relative;

          &.active {
            font-size: 18px;
            color: #18b3ab;
            text-align: left;
            font-style: normal;
            text-transform: none;

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 3px;
              background: #18b3ab;
            }
          }
        }
      }

      .search-bar {
        flex-shrink: 0;
        padding:  0;
        display: flex;
        gap: 2px;
        align-items: center;
        position: relative;
        .search-input {
        flex: 1;
        width: 182px;
      }
      .date-select {
        width: 48px;
      }
        input {
          width: 182px;
          height: 32px;
          padding: 0px 8px;
          background: #ffffff;
          border-radius: 3px 3px 3px 3px;
          border: 1px solid #dcdcdc;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.9);

          &::placeholder {
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.2);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .search-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          height: 32px;
          margin-left: auto;
          cursor: pointer;

          .search-btn-text {
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 32px;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }

          .search-btn-icon {
            width: 17px;
            height: 16px;
          }
        }
      }

      .patient-list {
        width: 100%;
        height: calc(100% - 52px - 52px);
        .patient-items {
          height: 100%;
          overflow-y: auto;
          gap: 5px;
          padding-right: 9px;
        }

        .patient-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 5px;
          // height: 72px;
          padding: 12px 16px;
          cursor: pointer;
          transition: background 0.2s;
          border: 1px solid transparent;

          &:hover,
          &.active {
            background: rgba(24, 179, 171, 0.1);
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #16ada4;
          }

          .patient-info {
            display: flex;
            align-items: center;
            width: 100%;

            .patient-icon {
              width: 16px;
              height: 16px;
              font-size: 16px;
            }

            .patient-name {
              padding-left: 5px;
              font-weight: 400;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.9);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              span{
                font-size: 14px;
              }
            }

            .tag {
              margin-left: auto;
              font-weight: 400;
              position: relative;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: right;
              font-style: normal;
              text-transform: none;
            }
          }

          .patient-ids {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 21px;
            width: 100%;

            .patient-id {
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .patient-time {
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: right;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }

    // 右侧主体内容
    .content-area {
      flex: 1;
      padding: 12px 17px;
      overflow-y: auto;
      position: relative;

      // 患者信息栏
      .patient-header {
        border-radius: 6px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .patient-basic {
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0x 12px;
          background: white;
          border: 1px solid #dcdcdc;

          .name {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.9);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;

            .patient-icon {
              width: 16px;
              height: 16px;
            }
          }

          .gender {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.9);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;
          }

          .id-number {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;
          }

          .age {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;

            .age-number {
              padding-right: 12px;
            }
          }

          .weight {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;
          }

          .visit-id {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .action-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 52px;
          height: 32px;
          background: #16ada4;
          border-radius: 4px 4px 4px 4px;
          font-weight: 400;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.9);
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      // 诊断信息
      .diagnosis-section {
        width: 100%;
        height: 120px;
        margin-bottom: 12px;
        border-radius: 12px 12px 12px 12px;
        background: #ffffff;
        overflow: hidden;

        h3 {
          display: flex;
          align-items: center;
          width: 100%;
          height: 40px;
          padding-left: 17px;
          background: #ffffff;
          border-bottom: 1px solid #dcdcdc;
          font-weight: 600;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.9);
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .diagnosis-info {
          display: flex;
          flex-direction: column;
          width: 100%;

          .item {
            display: flex;
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #dcdcdc;

            &:last-child {
              border-bottom: none;
            }

            .info-row {
              display: flex;
              width: 50%;
              height: 100%;

              .label {
                display: flex;
                align-items: center;
                width: 90px;
                padding-left: 17px;
                border-right: 1px solid #dcdcdc;
                font-weight: 400;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.6);
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .value {
                display: flex;
                align-items: center;
                width: calc(100% - 90px);
                padding: 0px 15px;
                border-right: 1px solid #dcdcdc;
                font-weight: 400;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.6);
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
      }

      // 历史记录栏
      .history-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: white;
        border-radius: 4px;
        margin-bottom: 15px;
        font-size: 13px;
        color: #595959;

        .history-btn {
          background: none;
          border: none;
          cursor: pointer;
          font-size: 16px;
        }
      }

      // 处方表格区域
      .prescription-section {
        background: white;
        border-radius: 4px;
        margin-bottom: 15px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          background-color: #f8f8f8;
          border-bottom: 1px solid #dcdcdc;

          .section-title {
            display: flex;
            align-items: center;
            height: 52px;
            padding-left: 20px;

            .text1 {
              font-weight: 400;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.9);
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .text2 {
              padding-left: 30px;
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.9);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }

          .header-info {
            display: flex;
            gap: 20px;
            font-size: 12px;
            color: #8c8c8c;
          }

          .header-tabs {
            display: flex;
            gap: 15px;
            font-size: 12px;

            .tab {
              padding: 4px 8px;
              border-radius: 2px;

              &.active {
                background: #e6f7ff;
                color: #1890ff;
              }
            }

            .tab-time,
            .tab-count,
            .tab-dose {
              color: #595959;
            }
          }
        }

        .prescription-table {
          width: 100%;
          border-collapse: collapse;
          font-size: 13px;

          thead {
            background: #fafafa;

            th {
              padding: 10px;
              text-align: left;
              font-weight: 500;
              color: #595959;
              border: 1px solid #f0f0f0;
            }
          }

          tbody {
            tr {
              &:hover {
                background: #fafafa;
              }

              td {
                padding: 10px;
                border: 1px solid #f0f0f0;

                &.highlight {
                  color: #13c2c2;
                  font-weight: 500;
                }

                .tag-blue {
                  color: #1890ff;
                  padding: 2px 6px;
                  background: #e6f7ff;
                  border-radius: 2px;
                }
              }
            }
          }
        }

        // 中药处方样式
        .tcm-prescription {
          border: 1px solid #f0f0f0;
          border-radius: 4px;
          padding: 15px;

          .tcm-info {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 13px;
            color: #595959;
          }

          .tcm-footer {
            display: flex;
            gap: 30px;
            padding-top: 10px;
            border-top: 1px solid #f0f0f0;
            font-size: 13px;
            color: #262626;
          }
        }
      }
    }

    // 右侧信息栏
    .right-sidebar {
      width: 280px;
      padding: 14px 0px;

      .info-card-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background: rgba(253, 253, 253, 0.6);
        border-radius: 0px 0px 12px 12px;
      }

      .info-card {
        border-bottom: 1px solid #f0f0f0;

        .info-card-title {
          display: flex;
          align-items: center;
          width: 100%;
          height: 52px;
          padding-left: 17px;
          border-bottom: 1px solid #e7e7e7;
          font-weight: 400;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.9);
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .cards {
        display: flex;
        flex-direction: column;
        height: 100%;

        .card {
          display: flex;
          flex-direction: column;
          padding: 0px 8px;
          padding-bottom: 0px;
          border-bottom: 1px solid #e7e7e7;

          &.active {
            padding-bottom: 15px;
          }

          .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 42px;
            padding-left: 8px;
            padding-right: 13px;

            .title {
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.9);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .btn {
              width: 16px;
              height: 16px;
              cursor: pointer;
              transform: rotate(180deg);

              &.active {
                transform: rotate(0deg);
              }
            }
          }

          .card-content {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 100%;
            padding: 15px 8px;
            background: #f8f8f8;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #dcdcdc;

            .card-content-item {
              padding: 10px 0px;
              border-bottom: 1px dashed #dcdcdc;

              &:first-child {
                padding-top: 0px;
              }

              &:last-child {
                padding-bottom: 0px;
                border-bottom: none;
              }

              .label {
                font-weight: bold;
                font-size: 11px;
                color: rgba(0, 0, 0, 0.6);
                line-height: 22px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .value {
                font-weight: 400;
                font-size: 11px;
                color: rgba(0, 0, 0, 0.6);
                line-height: 18px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
